<template>
	<div id="admin" class="container">
		<!-- <div class="search">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="帐号名称：">
          <el-input v-model="searchForm.account" placeholder="请输入帐号名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="searchbtn" @click="search(searchForm)">查询</el-button>
          <el-button @click="reset(searchForm)">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
		<h3 class="title"><span />帐号列表</h3>
		<el-button
			type="primary"
			class="add five"
			style="margin-bottom: 20px"
			icon="el-icon-plus"
			size="small"
			@click="open"
			>新增管理员</el-button
		>
		<el-table
			:data="tableData"
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
			border
			style="width: 100%"
		>
			<el-table-column prop="id" label="ID" width="120px" />
			<el-table-column prop="account" label="帐号名称" />
			<el-table-column prop="name" label="昵称" />
			<el-table-column prop="accountsState" label="帐号状态" width="160px">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.status"
						:active-value="1"
						:inactive-value="2"
						active-text="正常"
						inactive-text="禁用"
						active-color="#f84311"
						inactive-color="rgba(0,0,0,0.2)"
						:disabled="scope.row.group == 1 ? true : false"
						@change="disableUser(scope.row)"
					/>
				</template>
			</el-table-column>
			<!-- <el-table-column
        prop="role"
        label="角色"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.role }}
          </span>
        </template>
      </el-table-column> -->
			<el-table-column label="操作" width="200px" fixed="right">
				<template slot-scope="scope">
					<span v-if="scope.row.group == 1">/</span>
					<span v-else>
						<el-button class="edit" size="mini" @click="goEdit(scope.row)">编辑</el-button>
						<el-button class="dele" size="mini" @click="goDel(scope.row)">删除</el-button>
					</span>
				</template>
			</el-table-column>
		</el-table>
		<BouncedDialog
			:title="adminForm.id ? '编辑管理员' : '添加管理员'"
			:dialog-show.sync="dialogAdmin"
			width="50%"
			class="dialog"
		>
			<el-form ref="adminForm" :model="adminForm" inline :rules="adminRules" label-width="70px">
				<el-form-item label="账号：" prop="account">
					<el-input v-model="adminForm.account" placeholder="请依照这种格式XXX@XXX.COM" />
				</el-form-item>
				<el-form-item label="密码：" :prop="adminForm.id ? '' : 'password'">
					<el-input v-model="adminForm.password" type="password" />
				</el-form-item>
				<el-form-item label="昵称：" prop="name">
					<el-input v-model="adminForm.name" />
				</el-form-item>
				<el-form-item label="角色：" prop="role">
					<el-select v-model="adminForm.role" multiple placeholder="请选择" style="width: 100%">
						<el-option
							v-for="item in options"
							:key="item.id"
							:label="item.title"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="状态：">
					<el-select v-model="adminForm.status" placeholder="请选择">
						<el-option label="启用" :value="1" />
						<el-option label="禁用" :value="2" />
					</el-select>
				</el-form-item>
				<div class="btn">
					<el-button @click="dialogAdmin = false">取 消</el-button>
					<el-button type="primary" @click="submitAdmin()">确 定</el-button>
				</div>
			</el-form>
		</BouncedDialog>
		<el-pagination
			:current-page="page.currentPage"
			:page-sizes="page.pageSizes"
			:page-size="page.size"
			layout="total, sizes, prev, pager, next, jumper"
			:total="page.total"
			:hide-on-single-page="page.total < page.size ? true : false"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>
<script>
import adminApi from '@/api/admin.js'
import websiteApi from '@/api/website.js'
// import rolesApi from '@/api/roles'
var token = localStorage.getItem('token')
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			// myHeaders: { Authorization: token },
			// imageUrl: '',
			tableData: [],
			searchForm: {},
			dialogAdmin: false,
			options: [], // 角色
			name: '', // 暂存管理员姓名
			adminForm: {
				account: '',
				password: '',
				name: '',
				role: [],
				id: '',
			}, // 新增管理员表单
			adminRules: {
				account: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
				role: [{ required: true, message: '请选择角色', trigger: 'change' }],
			},
			page: {
				total: 0,
				currentPage: 1,
				size: 10,
				pageSizes: [10, 20, 30, 40],
			}, // 分页器
			val: {},
		}
	},
	created() {
		this.getList()
		// this.getwebList()
	},
	updated() {},
	methods: {
		disableUser(row) {
			adminApi.adminInfo({ id: row.id }).then((res) => {
				const admin = res.data

				const roles = []
				admin.role.forEach((el) => {
					roles.push(el.id)
				})
				this.adminForm = {
					name: admin.name,
					account: admin.account,
					id: admin.id,
					status: row.status,
					role: roles,
				}
				adminApi.adminUpdate(this.adminForm).then((res) => {
					if (res.code == 0) {
						this.$message.success(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			})
		},
		// getwebList() {
		//   this.val.page = this.page.currentPage
		//   this.val.limit = this.page.size
		//   websiteApi.webList(this.val).then(res => {
		//   })
		// },
		// 获取管理员列表
		getList() {
			this.val.page = this.page.currentPage
			this.val.limit = this.page.size
			this.val.account = this.searchForm.account
			adminApi.adminList(this.val).then((res) => {
				this.tableData = res.data
				this.page.total = res.count
			})
		},
		// 获取角色列表
		getRolesList() {
			adminApi.roleList().then((res) => {
				// 不展示超级管理员角色 role_id = 1
				const list = res.data
				list.forEach((res, index) => {
					if (res.id == 1) {
						list.splice(index, 1)
					}
				})
				this.options = list
			})
		},
		// 新增
		open() {
			this.dialogAdmin = true
			this.getRolesList()
			this.adminForm = {
				account: '',
				password: '',
				name: '',
				role: [],
				id: '',
				status: 1,
			}
		},
		// 管理员详情
		getAdminInfo(row) {
			adminApi.adminInfo({ id: row.id }).then((res) => {
				const admin = res.data
				const roles = []
				admin.role.forEach((el) => {
					roles.push(el.id)
				})

				this.adminForm = {
					name: admin.name,
					account: admin.account,
					id: admin.id,
					status: admin.status,
					role: roles,
				}

				this.dialogAdmin = true
			})
		},
		// 编辑
		goEdit(row) {
			this.getRolesList()
			this.getAdminInfo(row)

			// this.adminForm.id = row.id
			// this.adminForm.account = row.account
			// this.adminForm.role = [1, 2]
			// this.adminForm.name = row.name
			// this.adminForm.status = row.status
			// this.adminForm.password = ''
		},
		// 提交
		submitAdmin() {
			this.$refs.adminForm.validate((valid) => {
				if (valid) {
					if (!this.adminForm.id) {
						adminApi
							.adminSave({
								...this.adminForm,
							})
							.then((res) => {
								if (res.code === 0) {
									this.$message.success(res.msg)
									this.dialogAdmin = false
									this.getList()
								} else {
									this.$message.error(res.msg)
								}
							})
					} else {
						adminApi.adminUpdate({ ...this.adminForm }).then((res) => {
							if (res.code === 0) {
								this.$message.success(res.msg)
								this.dialogAdmin = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.warning('请填写必要信息')
				}
			})
		},

		// 删除
		goDel(row) {
			this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					adminApi.adminDelete({ id: row.id }).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 搜索
		search() {
			this.$refs.searchForm.validate((valid) => {
				this.page.currentPage = 1
				this.getList()
			})
		},

		// 重置搜索框
		reset(searchForm) {
			this.searchForm = {
				account: '',
			}
		},
		// 分页规格改变
		handleSizeChange(val) {
			this.page.size = val
			this.page.currentPage = 1
			this.getList()
		},
		// 分页点击
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
	},
}
</script>
<style lang="scss">
#admin {
	.el-form-item {
		width: 100%;
	}
	.el-form-item__content {
		width: calc(100% - 80px);
		.el-select {
			width: calc(100%);
		}
	}
}
</style>
<style lang="scss" scoped>
.el-table {
	margin-bottom: 20px;
}
.search {
	background-color: #fff;
	padding: 15px 10px;
	margin-bottom: 10px;
	.el-form-item {
		margin-bottom: 0;
	}
	.el-button {
		font-size: 14px;
	}
}
.btn {
	text-align: center;
}
</style>
